
<!-- 快速导航模块-->
<template>
  <div class="el-container container_curr">
    <!--  导航条start-->
    <el-menu
        :default-active= 'active'
        class="el-menu-demo"
        mode="vertical"
        background-color="#475769"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleSelect"
    >
      <el-menu-item index="1" >机票</el-menu-item>
      <el-menu-item index="2" >火车票</el-menu-item>
      <el-menu-item index="3">汽车票</el-menu-item>
    </el-menu><!--  导航条 end-->
    <div style="border: 1px Solid darkmagenta; width: 430px; padding-right: 110px; ">
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
import {ref, onMounted} from "vue";
import planeInfo from "./PlaneInfo.vue";
import {useRouter} from "vue-router";


export default {
  name: "QuickNavigation",
  components: {
    planeInfo
  },
  setup () {
    let active = '1'
    const router = useRouter()
    const handleSelect = (index)=>{
      switch (index){
        case '1':
          router.replace({name: 'PlaneInfo'})
          break
        case '2':
          router.replace('/home/train-info')
          break
        case '3':
          router.replace('/home/bus-info')
          break
      }
    }
    onMounted(() => {
      router.replace('/home/plane-info')
    })
    return{
      active,
      handleSelect
    }
  }
}
</script>

<style scoped>
.container_curr{

  /*position: relative;*/
  /*top: 25px;*/
  /*left: 80px;*/
  width: 500px;
  height: 390px;
  /*margin: 0 0 0 0;*/
  /*padding-left: 0 ;*/
  /*padding-right: 0;*/
}
</style>